<template>
  <div>
    <div class="ha">
      <van-nav-bar title="主页" fixed="true" />
    </div>
    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" @click="seach" />
    </div>
    <!-- 供应商start -->
    <van-skeleton title row="3" :loading="loading">
      <div class="exam-container">
        <div class="gong">
          <strong>供应商</strong>
        </div>
        <van-grid style="margin-top: 5px;">
          <van-grid-item v-for="(item, index) in supplier" :key="index" class="tu" span="6">
            <!-- src="../../img//tx.JPG" -->
            <div class="imgt">
              <img
                
                v-if="item.logo===null"
                class="imgs"
                width="30"
                height="30"
                @click="open(item)"
              />
              <van-image
                class="imgt"
                width="60"
                height="45"
                :src="item.logo"
                @click="open(item)"
                v-else
              />
              <van-icon class-prefix="Icon" :badge="item.goodsCount" tag="div" />
            </div>
            <span class="name">{{ item.enterpriseName }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </van-skeleton>
    <!-- 供应商end -->
    <div class="hr"></div>
    <!-- 折扣专区start -->
    <div>
      <div class="examTitle">折扣专区</div>
      <div>
        <van-skeleton title row="3" :loading="loadings">
          <van-row>
            <van-col v-for="(item, index) in goods" :key="index" class="exam-container2" span="11">
              <van-tag class="tag" type="primary">{{ item.supplier }}</van-tag>
              <img
                @click="details(item.id)"
                style="border-radius: 5px;"
                width="100%"
                height="60%"
                :src="item.photo"
              />
              <span class="content">{{ item.name }}</span>
              <p class="kg">
                {{ item.specs }}
                <sapn class="xiao">销量:{{ item.sales }}</sapn>
              </p>
              <p class="miao">
                秒杀价:￥{{ item.promotePrice }}
                <span class="num">库存:{{ item.inventory - item.sales }}</span>
              </p>
              <del class="price">￥{{ item.price }}</del>
              <div class="car-button">
                <div class="btn-reduce" v-if="item.carCount > 0" @click="reduce(item)">-</div>
                <div class="btn-number" v-if="item.carCount > 0">{{ item.carCount }}</div>
                <div class="btn-add" @click="add(item)">+</div>
              </div>
            </van-col>
          </van-row>
          <div v-if="goods.length > 0">
            <van-divider contentPosition="center">没有更多数据了</van-divider>
          </div>
        </van-skeleton>
      </div>
    </div>
    <!-- 折扣专区end -->
    <!-- 购物车start -->
    <div class="car">
      <van-row>
        <van-col span="8">
          <van-icon name="cart-o" size="20px" @click="goCar" :badge="cars.total" />
        </van-col>
        <van-col span="10">
          <div class="car-price" style="font-size:12px;">
            合计:
            <b class="car-sum">¥{{ cars.sum }}</b>
          </div>
        </van-col>
        <van-col span="6">
          <div class="car-go" @click="goCar">去结算</div>
        </van-col>
      </van-row>
    </div>
    <!-- 购物车end -->
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { getCookie } from "../../utils/auth";
import { useRouter } from "vue-router";
import { GetGetSuppliers } from "../../api/suppliers";
import { getPromoteGoods } from "../../api/goods";
import { showToast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      supplier: [],
      goods: [],
      loading: true,
      loadings: true,
      Refresh: false,
      cars: {
        total: 0,
        sum: 0,
        data: []
      }
    });

    const events = {
      onRefresh() {
        setTimeout(() => {
          data.Refresh = false;
        }, 1000);
      },
      details(id) {
        router.push("/shoppdetail/" + id);
      },
      seach() {
        router.push("/seach");
      },
      goCar() {
        if (data.cars.total === 0) {
          showToast("购物车是空的");
          return;
        }
        router.push("/car");
      },
      add(val) {
        let inventory = val.inventory - val.sales;
        if (val.carCount >= inventory) {
          showToast("库存不足");
          return;
        }

        let car = data.cars.data.find(d => d.id == val.id);
        if (car === undefined) {
          val.carCount = 1;
          data.cars.data.push(val);
        } else {
          val.carCount++;
          car.carCount = val.carCount;
          // localStorage.setItem("cart", JSON.stringify(data.cars));
        }
        data.cars.total++;

        data.cars.sum += Math.round(val.promotePrice * 100) / 100; //总价
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;

        data.cars.data.forEach(d => {
          if (d.id === val.id) {
            data.selectedCount += 1;
            let selectedSum =
              1 * (d.isPromote === 1 ? d.promotePrice : d.price);
            data.selectedSum = data.selectedSum + selectedSum;
          }
        });
        localStorage.setItem("cart", JSON.stringify(data.cars));
      },
      reduce(val) {
        let car = data.cars.data.find(d => d.id == val.id);
        if (car.carCount <= 1) {
          for (let i = 0; i < data.cars.data.length; i++) {
            if (data.cars.data[i].id === car.id) {
              data.cars.data.splice(i, 1);
              break;
            }
          }
        }
        data.cars.total--;
        val.carCount--;
        car.carCount = val.carCount;
        data.cars.sum -= Math.round(val.promotePrice * 100) / 100;
        // data.cars.sum = formatNumber(data.cars.sum);
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;
        localStorage.setItem("cart", JSON.stringify(data.cars));
      },
      open(val) {
        router.push("/order/opensupplier/" + val.id);
      }
    };

    onMounted(() => {
      if (localStorage.getItem("cart") != null) {
        data.cars = JSON.parse(localStorage.getItem("cart"));
      }
      if (!getCookie()) {
        router.push("/login");
        return;
      }
      //获取所有供应商
      GetGetSuppliers({
        page: 1,
        limit: 9999
      }).then(res => {
        if (res.result === 0) {
          data.supplier = res.data.data;
          data.loading = false;
        }
      });
      //获取所有折扣商品
      getPromoteGoods().then(res => {
        if (res.result === 0) {
          data.goods = res.data.data;
          data.loadings = false;
          data.goods.forEach(d => {
            let carss = data.cars.data.find(e => e.id == d.id);
            if (carss != undefined) {
              d.carCount = carss.carCount;
            }
          });
        }
      });
    });
    return {
      ...toRefs(data),
      ...events
    };
  }
};
</script>

<style scoped>
.car-price {
  width: 100%;
  background: linear-gradient(to right, #ee832b, #e97f07);
  height: 35px;
  text-align: center;
}

.car-go {
  padding-left: 2px;
  background: linear-gradient(to right, #f05023, #f04313);
  width: 100%;
  text-align: center;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  font-weight: bold;
}

.car-sum {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
}

.car {
  width: calc(100% - 50px);
  background: linear-gradient(to right, #e97f07, #ee832b);
  position: fixed;
  bottom: calc(55px + env(safe-area-inset-bottom));
  left: 12px;
  color: #fff;
  height: 35px;
  line-height: 35px;
  border-radius: 35px;
  padding-left: 20px;
}

.btn-number {
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  font-size: 15px;
  margin-top: -26px;
}

.car-button {
  float: right;
  margin-top: 20px;
  margin-right: 5px;
  display: flex;
  z-index: 999;
}

.btn-add {
  width: 18px;
  height: 18px;
  background-color: red;
  color: #fff;
  text-align: center;
  line-height: 15px;
  border-radius: 20px;
  font-weight: bold;
  margin-top: -26px;
}

.btn-reduce {
  width: 18px;
  height: 18px;
  background-color: red;
  color: #fff;
  text-align: center;
  line-height: 15px;
  border-radius: 20px;
  font-weight: bold;
  margin-top: -26px;
}

.Icon {
  height: 55px;
}

.price {
  position: relative;
  top: -30px;
  font-size: 10px;
  color: red;
  margin: 10px 0 0 0;
}

.num {
  font-size: 10px;
  color: #909090;
  float: right;
  position: relative;
  top: 4px;
}

.miao {
  font-size: 13px;
  position: relative;
  top: -19px;
  color: red;
  font-weight: bold;
  margin: 15px 0 7px 0;
}

.xiao {
  border-radius: 3px;
  font-size: 12px;
  float: right;
  background-color: red;
  color: #fff;
}

.kg {
  font-size: 9px;
  position: relative;
  top: -10px;
  margin: 15px 0 0 0;
  color: #909090;
}

.content {
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0px;
}

.img {
  border-radius: 5px;
}

.tag {
  margin-top: 1px;
  position: absolute;
  /* z-index: 99; */
  right: 5px;
  top: 0px;
}

.exam-container2 {
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 5px 5px 0 5px;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
  height: 270px;
}

.examTitle {
  background-color: orange;
  color: #fff;
  padding-left: 30px;
  height: 30px;
  line-height: 30px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  width: 90px;
}

.hr {
  border-top: 1px solid #eee;
  /* 设置顶部边框，可以调整宽度、样式和颜色 */
  height: 0;
  /* 高度设置为0，使得元素看上去像一条线 */
  margin: 10px 0;
  /* 设置上下外边距，可以调整 */
}
.imgs {
  margin: auto;
  width: 75%;
  height: 45px;
}

.imgt {
  /* padding-top: 5px; */
  margin: auto;
  width: 100%;
  height: 60px;
}

.naem {
  margin-bottom: 0px;
  font-size: 12px;
}

.tu {
  border: 1px solid #eee;
  text-align: center;
  height: 90px;
  font-size: 10px;
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  overflow: hidden;
  /* 超出容器部分隐藏 */
}

.exam-container {
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 10px;
  border-radius: 10px;
  /* height: 400px; */
}

.gong {
  font-size: 15px;
  color: orange;
}
</style>